<import type='css' file="css.bootstrap#min" />
<import type='css' file="css.font-awesome#min" />
<import type='css' file="css.style" />

<import file="js.jquery-1#11#0#min" />
<import file="js.bootstrap#min" />

<div class="profile-container">
    <section class="st-1">
    <h4 class="h4">电桩概况</h4>
    <div class="table-responsive">
      <table class="table">
        <thead></thead>
        <tbody>
            <tr>
                <td>本月</td>
                <td>数量<span>1024</span><i class="fa fa-caret-up"><span>66 (6.4%)</span></i></td>
                <td>新增<span>1010</span><i class="fa fa-caret-up"><span>66 (6.4%)</span></i></td>
                <td>预约<span>1024</span><i class="fa fa-caret-up"><span>66 (6.4%)</span></i></td>
                <td>充电<span>1010</span><i class="fa fa-caret-down"><span>66 (6.4%)</span></i></td>
            </tr>
            <tr>
                <td>上月</td>
                <td>数量<span>1024</span><i class="fa fa-caret-up"><span>66 (6.4%)</span></i></td>
                <td>新增<span>1010</span><i class="fa fa-caret-up"><span>66 (6.4%)</span></i></td>
                <td>预约<span>1024</span><i class="fa fa-caret-up"><span>66 (6.4%)</span></i></td>
                <td>充电<span>1010</span><i class="fa fa-caret-down"><span>66 (6.4%)</span></i></td>
            </tr>
        </tbody>
        <tfoot></tfoot>
      </table>
    </div>  
    </section>
    <section class="st-2">
        <div id="ca" style="min-width:400px;height:400px;"></div>
        <div id="cb" style="min-width:400px;height:400px;"></div>
    </section>
    <section class="st-3">
        <div id="cc" style="min-width:400px;height:400px"></div>
    </section>
</div>
<script type="text/javascript">
    $( document ).ready(function(){
        var a = window.document.location.href;
        var b = window.document.location.pathname;
        var c = a.substring(0,a.indexOf(b));
        
        $.getScript( c + '/Public/js/highcharts.js',function(){
            $('#ca').highcharts({
             chart: {
                 plotBackgroundColor: null,
                 plotBorderWidth: null,
                 plotShadow: false,
                 style: {
                    fontFamily: 'Microsoft Yahei'
                 }
             },
             credits: {
                 enabled:false
             },
             legend: {
                 itemMarginTop: 50,
                 symbolRadius: 50,
                 symbolWidth: 18,
                 symbolHeight:18,
                 itemStyle: {
                     fontSize: '18px',
                     fontWeight: 'normal'
                 },
                 itemDistance: 20
             },
             title: {
                 text: '电桩运营总览',
                 style: {
                    color: '#009fcd',
                    fontSize: '18px'                        
                 }
             },
             subtitle: {
                text: '电桩总数：800',
                style: {
                   color: '#000',
                   fontSize: '14px'
                }
             },
             tooltip: {
                 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
             },
             colors: [
                 '#ff9c9c',
                 '#48cfef',
                 '#a3be57'
             ],
             plotOptions: {
                 pie: {
                    point : {
                        events : {
                            legendItemClick: function() {
                                return false;
                            }
                        }
                    },
                     allowPointSelect: false,
                     cursor: 'pointer',
                     dataLabels: {
                         enabled: true,
                         format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                         style: {
                             color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                         }
                     },
                     showInLegend: true
                     
                 }
             },
             series: [{
                 type: 'pie',
                 name: '电桩实时状态总览',
                 innerSize: '50%',
                 data: [
                     ['规划中',200],
                     ['建设中',200],
                     ['运营中',400]
                 ]
             }]
            });
            $('#cb').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    style: {
                       fontFamily: 'Microsoft Yahei'
                    }
                },
                legend: {
                    itemMarginTop: 50,
                    symbolRadius: 50,
                    symbolWidth: 18,
                    symbolHeight:18,
                    itemStyle: {
                        fontSize: '18px',
                        fontWeight: 'normal'
                    },
                    itemDistance: 20
                },
                credits: {
                    enabled:false
                },
                title: {
                    text: '电桩实时状态总览',
                    style: {
                       color: '#009fcd',
                       fontSize: '18px'
                    }
                },
                subtitle: {
                   text: '电桩总数：400',
                   style: {
                      color: '#000',
                      fontSize: '14px'
                   }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                colors: [
                    '#ffc62a',
                    '#a3be57',
                    '#6294b2',
                    '#60a1e3'
                ],
                plotOptions: {
                    pie: {
                        point : {
                            events : {
                                legendItemClick: function() {
                                    return false;
                                }
                            }
                        },
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },
                        showInLegend: true
                        
                    }
                },
                series: [{
                    type: 'pie',
                    name: '电站总数',
                    innerSize: '50%',
                    data: [
                        ['充电',100],
                        ['预约',100],
                        ['空闲',100],
                        ['离线',100]
                    ]
                }]
            });
            $('#cc').highcharts({
                chart: {
                    type: 'area'
                },
                credits: {
                    enabled:false
                },
                legend: {
                    enabled: false
                },
                title: {
                    text: '成功预约次数/日'
                },
                xAxis: {
                    categories: ['2015-06-16', '2015-06-17', '2015-06-18', '2015-06-19', '2015-06-20', '2015-06-21', '2015-06-22','2015-06-23','2015-06-24','2015-06-25','2015-06-26','2015-06-27','2015-06-28','2015-06-29'],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        enabled: false
                    },
                    labels: {
                        formatter: function () {
                            return this.value / 1000;
                        }
                    }
                },
                tooltip: {
                    shared: true,
                    valueSuffix: ' millions'
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#009fcd',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#009fcd',
                            fillColor: '#009fcd'
                        }
                    }
                },
                fillColor: 'red',
                series: [{
                    name: 'Asia',
                    data: [502, 635, 809, 947, 1402, 3634, 5268,809,4635,947,1402,3634,5268,3634],
                    color: '#ccecf5',
                }]
            });
        });
    });
</script>

